<template>
  <div class="person-info">
    <el-card style="width: 90%; padding: 20px">
      <el-form :model="form" :inline="true" label-width="100">
        <el-row>
          <el-col :span="8">
            <el-form-item label="昵称" prop="nickName">
              <el-input
                v-model="form.nickName"
                placeholder="输入修改的昵称"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址" prop="address">
              <el-input
                v-model="form.address"
                placeholder="格式:xx栋xx号"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="手机" prop="phone">
              <el-input
                v-model="form.phone"
                placeholder="输入修改的手机号"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="form.password"
                placeholder="输入修改的密码"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱" prop="userEmail">
              <el-input
                v-model="form.userEmail"
                placeholder="输入修改的邮箱"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>

          <div style="margin-left: 60px">
            <el-button
              v-if="editStatus"
              type="primary"
              @click="editStatus = false"
              >个人信息编辑</el-button
            >
            <div v-else>
              <el-button @click="handleEdit" type="primary">完成编辑</el-button>
              <el-button @click="editStatus = true">取消编辑</el-button>
            </div>
          </div>

          <el-col :span="24">
            <el-form-item label="头像">
              <el-upload
                class="avatar-uploader"
                action="http://139.159.149.18:8086/api/common/getFileUUIDName"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :data="{ uploadType: 0, smartCheck: 0 }"
                with-credentials
                name="files"
              >
                <el-image
                  v-if="form.iconUrl"
                  :src="form.iconUrl"
                  class="avatar"
                  fit="cover"
                ></el-image>
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useUserStore } from "@/stores/user";
import { updateUserInfo } from "@/api/user";
import { ElMessage } from "element-plus";
import { uploadFile } from "@/api/file";
const userStore = useUserStore();
interface RuleForm {
  address: string;
  phone: string;
  iconUrl: string;
  password: string;
  userEmail: string;
  nickName: string;
  userId: string;
}
const form = reactive<RuleForm>({
  address: "",
  phone: "",
  iconUrl: "",
  password: "",
  userEmail: "",
  nickName: "",
  userId: "",
});
const editStatus = ref(true);
const handleEdit = async () => {
  if (uidImage.value) {
    await uploadFile(avatarFile.value, uidImage.value, 0).then(() => {
      form.iconUrl = realImgUrl.value;
    });
  }
  form.userId = userStore.userDesc.id;
  await updateUserInfo(form).then((res: any) => {
    ElMessage({
      message: res.message,
      type: "success",
    });
    userStore.userDesc.address = form.address;
    userStore.userDesc.phone = form.phone;
    userStore.userDesc.iconUrl = form.iconUrl;
    userStore.userDesc.password = form.password;
    userStore.userDesc.userEmail = form.userEmail;
    userStore.userDesc.nickName = form.nickName;
  });
  editStatus.value = true;
};

onMounted(() => {
  form.address = userStore.userDesc.address;
  form.phone = userStore.userDesc.phone;
  form.iconUrl = userStore.userDesc.iconUrl;
  form.password = userStore.userDesc.password;
  form.userEmail = userStore.userDesc.userEmail;
  form.nickName = userStore.userDesc.nickName;
});
// import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import type { UploadProps } from "element-plus";

const uidImage = ref<any>("");
const avatarFile = ref<any>();
const realImgUrl = ref<any>("");
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  uidImage.value = response.data[0].uuidName;
  realImgUrl.value = response.data[0].pictureRealPath.slice(
    0,
    response.data[0].pictureRealPath.length - 1
  );
  avatarFile.value = uploadFile;
  form.iconUrl = URL.createObjectURL(uploadFile.raw!);
};
</script>

<style scoped lang="less">
.person-info {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  padding-top: 20px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
